<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文件上传系统</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#4080FF',
                        success: '#00B42A',
                        warning: '#FF7D00',
                        danger: '#F53F3F',
                        neutral: {
                            100: '#F2F3F5',
                            200: '#E5E6EB',
                            300: '#C9CDD4',
                            400: '#86909C',
                            500: '#4E5969',
                            600: '#272E3B',
                            700: '#1D2129',
                        }
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                },
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .transition-height {
                transition: max-height 0.3s ease-in-out;
            }
            .shadow-hover {
                transition: all 0.2s ease;
            }
            .shadow-hover:hover {
                box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
                transform: translateY(-2px);
            }
            .bg-gradient-primary {
                background: linear-gradient(135deg, #165DFF 0%, #4080FF 100%);
            }
        }
    </style>
</head>
<body class="font-inter bg-neutral-100 text-neutral-700 min-h-screen flex flex-col">
<!-- 顶部导航栏 -->
<header class="bg-white shadow-md sticky top-0 z-50 transition-all duration-300" id="navbar">
    <div class="container mx-auto px-4 py-3 flex items-center justify-between">
        <div class="flex items-center space-x-2">
            <i class="fa fa-cloud-upload text-primary text-2xl"></i>
            <h1 class="text-xl font-bold text-neutral-700">文件上传系统</h1>
        </div>
        <nav class="hidden md:flex items-center space-x-6">
            <a href="#" class="text-neutral-600 hover:text-primary transition-colors duration-200">首页</a>
            <a href="#" class="text-primary font-medium border-b-2 border-primary pb-1">文件管理</a>
            <a href="#" class="text-neutral-600 hover:text-primary transition-colors duration-200">使用指南</a>
            <a href="#" class="text-neutral-600 hover:text-primary transition-colors duration-200">联系我们</a>
        </nav>
        <div class="flex items-center space-x-4">
            <div class="relative">
                <button class="bg-neutral-100 hover:bg-neutral-200 p-2 rounded-full transition-colors duration-200">
                    <i class="fa fa-bell-o text-neutral-500"></i>
                    <span class="absolute top-0 right-0 h-4 w-4 bg-danger rounded-full flex items-center justify-center text-white text-xs">3</span>
                </button>
            </div>
            <div class="flex items-center space-x-2">
                <img src="https://picsum.photos/id/1005/200/200" alt="用户头像" class="h-8 w-8 rounded-full object-cover border-2 border-primary">
                <span class="hidden md:inline text-sm font-medium">管理员</span>
            </div>
            <button class="md:hidden text-neutral-600" id="mobile-menu-button">
                <i class="fa fa-bars text-xl"></i>
            </button>
        </div>
    </div>
    <!-- 移动端菜单 -->
    <div class="md:hidden max-h-0 overflow-hidden transition-height duration-300" id="mobile-menu">
        <div class="px-4 py-2 space-y-3 bg-white">
            <a href="#" class="block py-2 px-4 hover:bg-neutral-100 rounded-lg transition-colors duration-200">首页</a>
            <a href="#" class="block py-2 px-4 bg-primary/10 text-primary rounded-lg">文件管理</a>
            <a href="#" class="block py-2 px-4 hover:bg-neutral-100 rounded-lg transition-colors duration-200">使用指南</a>
            <a href="#" class="block py-2 px-4 hover:bg-neutral-100 rounded-lg transition-colors duration-200">联系我们</a>
        </div>
    </div>
</header>

<!-- 主内容区 -->
<main class="flex-grow container mx-auto px-4 py-8">
    <!-- 页面标题和操作按钮 -->
    <div class="flex flex-col md:flex-row md:items-center justify-between mb-8">
        <div>
            <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-neutral-700 mb-2">文件管理</h2>
            <p class="text-neutral-500">上传和管理身份证、产权证等重要文件</p>
        </div>
        <div class="mt-4 md:mt-0 flex flex-wrap gap-3">
            <button id="upload-button" class="bg-primary hover:bg-primary/90 text-white font-medium py-2 px-6 rounded-lg shadow-lg shadow-primary/20 transition-all duration-200 flex items-center">
                <i class="fa fa-upload mr-2"></i> 上传文件
            </button>
            <button class="bg-white hover:bg-neutral-50 text-neutral-700 font-medium py-2 px-6 rounded-lg border border-neutral-200 shadow-sm transition-all duration-200 flex items-center">
                <i class="fa fa-filter mr-2"></i> 筛选
            </button>
            <button class="bg-white hover:bg-neutral-50 text-neutral-700 font-medium py-2 px-6 rounded-lg border border-neutral-200 shadow-sm transition-all duration-200 flex items-center">
                <i class="fa fa-download mr-2"></i> 导出
            </button>
        </div>
    </div>

    <!-- 统计卡片 -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
        <div class="bg-white rounded-xl p-6 shadow-sm hover:shadow-md transition-all duration-300 border-l-4 border-primary">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-neutral-500 text-sm">总文件数</p>
                    <h3 class="text-2xl font-bold mt-1">158</h3>
                    <p class="text-success text-xs mt-2 flex items-center">
                        <i class="fa fa-arrow-up mr-1"></i> 较上月增长 12%
                    </p>
                </div>
                <div class="bg-primary/10 p-3 rounded-lg">
                    <i class="fa fa-file-text-o text-primary text-xl"></i>
                </div>
            </div>
        </div>
        <div class="bg-white rounded-xl p-6 shadow-sm hover:shadow-md transition-all duration-300 border-l-4 border-success">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-neutral-500 text-sm">身份证</p>
                    <h3 class="text-2xl font-bold mt-1">76</h3>
                    <p class="text-success text-xs mt-2 flex items-center">
                        <i class="fa fa-arrow-up mr-1"></i> 较上月增长 8%
                    </p>
                </div>
                <div class="bg-success/10 p-3 rounded-lg">
                    <i class="fa fa-id-card-o text-success text-xl"></i>
                </div>
            </div>
        </div>
        <div class="bg-white rounded-xl p-6 shadow-sm hover:shadow-md transition-all duration-300 border-l-4 border-warning">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-neutral-500 text-sm">产权证</p>
                    <h3 class="text-2xl font-bold mt-1">42</h3>
                    <p class="text-danger text-xs mt-2 flex items-center">
                        <i class="fa fa-arrow-down mr-1"></i> 较上月减少 3%
                    </p>
                </div>
                <div class="bg-warning/10 p-3 rounded-lg">
                    <i class="fa fa-building-o text-warning text-xl"></i>
                </div>
            </div>
        </div>
        <div class="bg-white rounded-xl p-6 shadow-sm hover:shadow-md transition-all duration-300 border-l-4 border-secondary">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-neutral-500 text-sm">其他文件</p>
                    <h3 class="text-2xl font-bold mt-1">40</h3>
                    <p class="text-success text-xs mt-2 flex items-center">
                        <i class="fa fa-arrow-up mr-1"></i> 较上月增长 18%
                    </p>
                </div>
                <div class="bg-secondary/10 p-3 rounded-lg">
                    <i class="fa fa-files-o text-secondary text-xl"></i>
                </div>
            </div>
        </div>
    </div>

    <!-- 文件列表表格 -->
    <div class="bg-white rounded-xl shadow-sm overflow-hidden">
        <div class="p-6 border-b border-neutral-100">
            <div class="flex flex-col md:flex-row md:items-center justify-between">
                <h3 class="text-lg font-semibold text-neutral-700">文件列表</h3>
                <div class="mt-4 md:mt-0 flex items-center">
                    <div class="relative mr-3">
                        <input type="text" placeholder="搜索文件名" class="pl-10 pr-4 py-2 border border-neutral-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all duration-200 w-full md:w-64">
                        <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-neutral-400"></i>
                    </div>
                    <select class="border border-neutral-200 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all duration-200">
                        <option>全部类型</option>
                        <option>身份证</option>
                        <option>产权证</option>
                        <option>营业执照</option>
                        <option>其他文件</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="overflow-x-auto">
            <table class="w-full">
                <thead>
                <tr class="bg-neutral-50 text-left text-neutral-500 text-sm">
                    <th class="px-6 py-4 font-medium">文件名称</th>
                    <th class="px-6 py-4 font-medium">文件类型</th>
                    <th class="px-6 py-4 font-medium">上传时间</th>
                    <th class="px-6 py-4 font-medium">大小</th>
                    <th class="px-6 py-4 font-medium">状态</th>
                    <th class="px-6 py-4 font-medium text-right">操作</th>
                </tr>
                </thead>
                <tbody>
                <tr class="border-b border-neutral-100 hover:bg-neutral-50 transition-colors duration-150">
                    <td class="px-6 py-4">
                        <div class="flex items-center">
                            <div class="bg-primary/10 p-2 rounded mr-3">
                                <i class="fa fa-file-image-o text-primary"></i>
                            </div>
                            <div>
                                <p class="font-medium">张三-身份证正面.jpg</p>
                                <p class="text-xs text-neutral-500">ID_1001</p>
                            </div>
                        </div>
                    </td>
                    <td class="px-6 py-4">身份证</td>
                    <td class="px-6 py-4 text-neutral-500">2025-05-10 14:30</td>
                    <td class="px-6 py-4 text-neutral-500">2.4 MB</td>
                    <td class="px-6 py-4">
                        <span class="px-2 py-1 bg-success/10 text-success text-xs rounded-full">已审核</span>
                    </td>
                    <td class="px-6 py-4 text-right">
                        <div class="flex items-center justify-end space-x-2">
                            <button class="p-1.5 rounded-full hover:bg-neutral-100 text-neutral-500 transition-colors duration-150" title="预览">
                                <i class="fa fa-eye"></i>
                            </button>
                            <button class="p-1.5 rounded-full hover:bg-neutral-100 text-neutral-500 transition-colors duration-150" title="下载">
                                <i class="fa fa-download"></i>
                            </button>
                            <button class="p-1.5 rounded-full hover:bg-neutral-100 text-neutral-500 transition-colors duration-150" title="编辑">
                                <i class="fa fa-pencil"></i>
                            </button>
                            <button class="p-1.5 rounded-full hover:bg-neutral-100 text-neutral-500 transition-colors duration-150" title="删除">
                                <i class="fa fa-trash-o"></i>
                            </button>
                        </div>
                    </td>
                </tr>
                <tr class="border-b border-neutral-100 hover:bg-neutral-50 transition-colors duration-150">
                    <td class="px-6 py-4">
                        <div class="flex items-center">
                            <div class="bg-primary/10 p-2 rounded mr-3">
                                <i class="fa fa-file-image-o text-primary"></i>
                            </div>
                            <div>
                                <p class="font-medium">张三-身份证反面.jpg</p>
                                <p class="text-xs text-neutral-500">ID_1002</p>
                            </div>
                        </div>
                    </td>
                    <td class="px-6 py-4">身份证</td>
                    <td class="px-6 py-4 text-neutral-500">2025-05-10 14:31</td>
                    <td class="px-6 py-4 text-neutral-500">2.1 MB</td>
                    <td class="px-6 py-4">
                        <span class="px-2 py-1 bg-success/10 text-success text-xs rounded-full">已审核</span>
                    </td>
                    <td class="px-6 py-4 text-right">
                        <div class="flex items-center justify-end space-x-2">
                            <button class="p-1.5 rounded-full hover:bg-neutral-100 text-neutral-500 transition-colors duration-150" title="预览">
                                <i class="fa fa-eye"></i>
                            </button>
                            <button class="p-1.5 rounded-full hover:bg-neutral-100 text-neutral-500 transition-colors duration-150" title="下载">
                                <i class="fa fa-download"></i>
                            </button>
                            <button class="p-1.5 rounded-full hover:bg-neutral-100 text-neutral-500 transition-colors duration-150" title="编辑">
                                <i class="fa fa-pencil"></i>
                            </button>
                            <button class="p-1.5 rounded-full hover:bg-neutral-100 text-neutral-500 transition-colors duration-150" title="删除">
                                <i class="fa fa-trash-o"></i>
                            </button>
                        </div>
                    </td>
                </tr>
                <tr class="border-b border-neutral-100 hover:bg-neutral-50 transition-colors duration-150">
                    <td class="px-6 py-4">
                        <div class="flex items-center">
                            <div class="bg-warning/10 p-2 rounded mr-3">
                                <i class="fa fa-file-pdf-o text-warning"></i>
                            </div>
                            <div>
                                <p class="font-medium">北京市朝阳区房产产权证.pdf</p>
                                <p class="text-xs text-neutral-500">ID_1003</p>
                            </div>
                        </div>
                    </td>
                    <td class="px-6 py-4">产权证</td>
                    <td class="px-6 py-4 text-neutral-500">2025-05-12 09:15</td>
                    <td class="px-6 py-4 text-neutral-500">5.8 MB</td>
                    <td class="px-6 py-4">
                        <span class="px-2 py-1 bg-warning/10 text-warning text-xs rounded-full">待审核</span>
                    </td>
                    <td class="px-6 py-4 text-right">
                        <div class="flex items-center justify-end space-x-2">
                            <button class="p-1.5 rounded-full hover:bg-neutral-100 text-neutral-500 transition-colors duration-150" title="预览">
                                <i class="fa fa-eye"></i>
                            </button>
                            <button class="p-1.5 rounded-full hover:bg-neutral-100 text-neutral-500 transition-colors duration-150" title="下载">
                                <i class="fa fa-download"></i>
                            </button>
                            <button class="p-1.5 rounded-full hover:bg-neutral-100 text-neutral-500 transition-colors duration-150" title="编辑">
                                <i class="fa fa-pencil"></i>
                            </button>
                            <button class="p-1.5 rounded-full hover:bg-neutral-100 text-neutral-500 transition-colors duration-150" title="删除">
                                <i class="fa fa-trash-o"></i>
                            </button>
                        </div>
                    </td>
                </tr>
                <tr class="border-b border-neutral-100 hover:bg-neutral-50 transition-colors duration-150">
                    <td class="px-6 py-4">
                        <div class="flex items-center">
                            <div class="bg-secondary/10 p-2 rounded mr-3">
                                <i class="fa fa-file-word-o text-secondary"></i>
                            </div>
                            <div>
                                <p class="font-medium">房屋租赁合同.docx</p>
                                <p class="text-xs text-neutral-500">ID_1004</p>
                            </div>
                        </div>
                    </td>
                    <td class="px-6 py-4">其他文件</td>
                    <td class="px-6 py-4 text-neutral-500">2025-05-14 16:42</td>
                    <td class="px-6 py-4 text-neutral-500">1.2 MB</td>
                    <td class="px-6 py-4">
                        <span class="px-2 py-1 bg-success/10 text-success text-xs rounded-full">已审核</span>
                    </td>
                    <td class="px-6 py-4 text-right">
                        <div class="flex items-center justify-end space-x-2">
                            <button class="p-1.5 rounded-full hover:bg-neutral-100 text-neutral-500 transition-colors duration-150" title="预览">
                                <i class="fa fa-eye"></i>
                            </button>
                            <button class="p-1.5 rounded-full hover:bg-neutral-100 text-neutral-500 transition-colors duration-150" title="下载">
                                <i class="fa fa-download"></i>
                            </button>
                            <button class="p-1.5 rounded-full hover:bg-neutral-100 text-neutral-500 transition-colors duration-150" title="编辑">
                                <i class="fa fa-pencil"></i>
                            </button>
                            <button class="p-1.5 rounded-full hover:bg-neutral-100 text-neutral-500 transition-colors duration-150" title="删除">
                                <i class="fa fa-trash-o"></i>
                            </button>
                        </div>
                    </td>
                </tr>
                <tr class="border-b border-neutral-100 hover:bg-neutral-50 transition-colors duration-150">
                    <td class="px-6 py-4">
                        <div class="flex items-center">
                            <div class="bg-primary/10 p-2 rounded mr-3">
                                <i class="fa fa-file-image-o text-primary"></i>
                            </div>
                            <div>
                                <p class="font-medium">李四-身份证正面.jpg</p>
                                <p class="text-xs text-neutral-500">ID_1005</p>
                            </div>
                        </div>
                    </td>
                    <td class="px-6 py-4">身份证</td>
                    <td class="px-6 py-4 text-neutral-500">2025-05-15 10:20</td>
                    <td class="px-6 py-4 text-neutral-500">2.9 MB</td>
                    <td class="px-6 py-4">
                        <span class="px-2 py-1 bg-danger/10 text-danger text-xs rounded-full">审核失败</span>
                    </td>
                    <td class="px-6 py-4 text-right">
                        <div class="flex items-center justify-end space-x-2">
                            <button class="p-1.5 rounded-full hover:bg-neutral-100 text-neutral-500 transition-colors duration-150" title="预览">
                                <i class="fa fa-eye"></i>
                            </button>
                            <button class="p-1.5 rounded-full hover:bg-neutral-100 text-neutral-500 transition-colors duration-150" title="下载">
                                <i class="fa fa-download"></i>
                            </button>
                            <button class="p-1.5 rounded-full hover:bg-neutral-100 text-neutral-500 transition-colors duration-150" title="编辑">
                                <i class="fa fa-pencil"></i>
                            </button>
                            <button class="p-1.5 rounded-full hover:bg-neutral-100 text-neutral-500 transition-colors duration-150" title="删除">
                                <i class="fa fa-trash-o"></i>
                            </button>
                        </div>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
        <div class="p-6 border-t border-neutral-100 flex flex-col md:flex-row md:items-center justify-between">
            <p class="text-neutral-500 text-sm mb-4 md:mb-0">显示 1 到 5 条，共 158 条记录</p>
            <div class="flex items-center">
                <button class="w-9 h-9 flex items-center justify-center rounded-lg border border-neutral-200 bg-white text-neutral-500 hover:bg-neutral-50 transition-colors duration-150 mr-2">
                    <i class="fa fa-angle-left"></i>
                </button>
                <button class="w-9 h-9 flex items-center justify-center rounded-lg border border-primary bg-primary text-white hover:bg-primary/90 transition-colors duration-150">1</button>
                <button class="w-9 h-9 flex items-center justify-center rounded-lg border border-neutral-200 bg-white text-neutral-700 hover:bg-neutral-50 transition-colors duration-150 mx-1">2</button>
                <button class="w-9 h-9 flex items-center justify-center rounded-lg border border-neutral-200 bg-white text-neutral-700 hover:bg-neutral-50 transition-colors duration-150 mx-1">3</button>
                <button class="w-9 h-9 flex items-center justify-center rounded-lg border border-neutral-200 bg-white text-neutral-700 hover:bg-neutral-50 transition-colors duration-150 mx-1">4</button>
                <button class="w-9 h-9 flex items-center justify-center rounded-lg border border-neutral-200 bg-white text-neutral-700 hover:bg-neutral-50 transition-colors duration-150 mx-1">5</button>
                <button class="w-9 h-9 flex items-center justify-center rounded-lg border border-neutral-200 bg-white text-neutral-500 hover:bg-neutral-50 transition-colors duration-150 ml-2">
                    <i class="fa fa-angle-right"></i>
                </button>
            </div>
        </div>
    </div>
</main>

<!-- 页脚 -->
<footer class="bg-white border-t border-neutral-200 py-6">
    <div class="container mx-auto px-4">
        <div class="flex flex-col md:flex-row md:items-center justify-between">
            <div class="mb-4 md:mb-0">
                <p class="text-neutral-500 text-sm">© 2025 文件上传系统. 保留所有权利.</p>
            </div>
            <div class="flex items-center space-x-6">
                <a href="#" class="text-neutral-500 hover:text-primary transition-colors duration-150">
                    <i class="fa fa-weixin text-xl"></i>
                </a>
                <a href="#" class="text-neutral-500 hover:text-primary transition-colors duration-150">
                    <i class="fa fa-weibo text-xl"></i>
                </a>
                <a href="#" class="text-neutral-500 hover:text-primary transition-colors duration-150">
                    <i class="fa fa-envelope-o text-xl"></i>
                </a>
            </div>
        </div>
    </div>
</footer>

<!-- 上传文件模态框 -->
<div id="upload-modal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden items-center justify-center">
    <div class="bg-white rounded-xl shadow-xl w-full max-w-2xl mx-4 transform transition-all duration-300 scale-95 opacity-0" id="modal-content">
        <div class="p-6 border-b border-neutral-100 flex items-center justify-between">
            <h3 class="text-lg font-semibold text-neutral-700">上传文件</h3>
            <button id="close-modal" class="text-neutral-500 hover:text-neutral-700 transition-colors duration-150">
                <i class="fa fa-times text-xl"></i>
            </button>
        </div>
        <div class="p-6">
            <form id="upload-form">
                <div class="mb-6">
                    <label class="block text-neutral-700 font-medium mb-2" for="file-type">文件类型</label>
                    <select id="file-type" class="w-full px-4 py-2 border border-neutral-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all duration-200">
                        <option value="">请选择文件类型</option>
                        <option value="id_card">身份证</option>
                        <option value="property_certificate">产权证</option>
                        <option value="business_license">营业执照</option>
                        <option value="other">其他文件</option>
                    </select>
                </div>
                <div class="mb-6">
                    <label class="block text-neutral-700 font-medium mb-2" for="file-description">文件描述</label>
                    <input type="text" id="file-description" placeholder="请输入文件描述" class="w-full px-4 py-2 border border-neutral-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all duration-200">
                </div>
                <div class="mb-6">
                    <label class="block text-neutral-700 font-medium mb-2">上传文件</label>
                    <div class="border-2 border-dashed border-neutral-300 rounded-lg p-8 text-center hover:border-primary transition-colors duration-200 cursor-pointer" id="drop-area">
                        <input type="file" id="file-input" class="hidden" multiple>
                        <i class="fa fa-cloud-upload text-4xl text-neutral-400 mb-4"></i>
                        <p class="text-neutral-500 mb-2">拖放文件到此处，或点击上传</p>
                        <p class="text-xs text-neutral-400">支持 JPG, PNG, PDF, DOCX 格式，单个文件不超过 10MB</p>
                    </div>
                </div>
                <div id="preview-container" class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-6 hidden">
                    <!-- 预览区域，动态生成 -->
                </div>
                <div class="flex justify-end space-x-3">
                    <button type="button" id="cancel-upload" class="px-6 py-2 border border-neutral-200 rounded-lg text-neutral-700 font-medium hover:bg-neutral-50 transition-colors duration-150">取消</button>
                    <button type="submit" class="px-6 py-2 bg-primary hover:bg-primary/90 text-white font-medium rounded-lg shadow-md shadow-primary/20 transition-all duration-200">上传文件</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- 文件预览模态框 -->
<div id="preview-modal" class="fixed inset-0 bg-black bg-opacity-90 z-50 hidden items-center justify-center">
    <div class="bg-white rounded-xl shadow-xl w-full max-w-4xl mx-4 transform transition-all duration-300 scale-95 opacity-0" id="preview-modal-content">
        <div class="p-6 border-b border-neutral-100 flex items-center justify-between">
            <h3 class="text-lg font-semibold text-neutral-700" id="preview-title">文件预览</h3>
            <button id="close-preview-modal" class="text-neutral-500 hover:text-neutral-700 transition-colors duration-150">
                <i class="fa fa-times text-xl"></i>
            </button>
        </div>
        <div class="p-6">
            <div class="relative aspect-video bg-neutral-100 rounded-lg overflow-hidden flex items-center justify-center mb-6">
                <img id="preview-image" src="https://picsum.photos/800/450" alt="文件预览" class="max-w-full max-h-full object-contain">
                <div id="pdf-placeholder" class="hidden flex-col items-center justify-center">
                    <i class="fa fa-file-pdf-o text-6xl text-neutral-300 mb-4"></i>
                    <p class="text-neutral-500">PDF 文件预览</p>
                </div>
                <div id="doc-placeholder" class="hidden flex-col items-center justify-center">
                    <i class="fa fa-file-word-o text-6xl text-neutral-300 mb-4"></i>
                    <p class="text-neutral-500">文档文件预览</p>
                </div>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <h4 class="text-sm font-medium text-neutral-500 mb-2">文件信息</h4>
                    <div class="space-y-2">
                        <div class="flex justify-between">
                            <span class="text-neutral-600">文件名：</span>
                            <span class="font-medium" id="preview-filename">张三-身份证正面.jpg</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-neutral-600">文件类型：</span>
                            <span class="font-medium" id="preview-filetype">身份证</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-neutral-600">上传时间：</span>
                            <span class="font-medium" id="preview-upload-time">2025-05-10 14:30</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-neutral-600">文件大小：</span>
                            <span class="font-medium" id="preview-filesize">2.4 MB</span>
                        </div>
                    </div>
                </div>
                <div>
                    <h4 class="text-sm font-medium text-neutral-500 mb-2">文件描述</h4>
                    <p class="text-neutral-700" id="preview-description">张三的身份证正面照片，用于身份验证。</p>
                </div>
            </div>
        </div>
        <div class="p-6 border-t border-neutral-100 flex justify-end space-x-3">
            <button id="close-preview" class="px-6 py-2 border border-neutral-200 rounded-lg text-neutral-700 font-medium hover:bg-neutral-50 transition-colors duration-150">关闭</button>
            <button class="px-6 py-2 bg-primary hover:bg-primary/90 text-white font-medium rounded-lg shadow-md shadow-primary/20 transition-all duration-200">
                <i class="fa fa-download mr-2"></i> 下载文件
            </button>
        </div>
    </div>
</div>

<script>
    // 导航栏滚动效果
    const navbar = document.getElementById('navbar');
    window.addEventListener('scroll', () => {
        if (window.scrollY > 10) {
            navbar.classList.add('py-2');
            navbar.classList.remove('py-3');
            navbar.classList.add('shadow-lg');
        } else {
            navbar.classList.add('py-3');
            navbar.classList.remove('py-2');
            navbar.classList.remove('shadow-lg');
        }
    });

    // 移动端菜单
    const mobileMenuButton = document.getElementById('mobile-menu-button');
    const mobileMenu = document.getElementById('mobile-menu');
    let menuOpen = false;

    mobileMenuButton.addEventListener('click', () => {
        if (menuOpen) {
            mobileMenu.style.maxHeight = '0';
            mobileMenuButton.innerHTML = '<i class="fa fa-bars text-xl"></i>';
        } else {
            mobileMenu.style.maxHeight = '300px';
            mobileMenuButton.innerHTML = '<i class="fa fa-times text-xl"></i>';
        }
        menuOpen = !menuOpen;
    });

    // 上传文件模态框
    const uploadButton = document.getElementById('upload-button');
    const uploadModal = document.getElementById('upload-modal');
    const modalContent = document.getElementById('modal-content');
    const closeModal = document.getElementById('close-modal');
    const cancelUpload = document.getElementById('cancel-upload');
    const dropArea = document.getElementById('drop-area');
    const fileInput = document.getElementById('file-input');
    const previewContainer = document.getElementById('preview-container');
    const uploadForm = document.getElementById('upload-form');

    // 打开上传模态框
    uploadButton.addEventListener('click', () => {
        uploadModal.classList.remove('hidden');
        uploadModal.classList.add('flex');
        setTimeout(() => {
            modalContent.classList.remove('scale-95', 'opacity-0');
            modalContent.classList.add('scale-100', 'opacity-100');
        }, 10);
    });

    // 关闭上传模态框
    function closeUploadModal() {
        modalContent.classList.remove('scale-100', 'opacity-100');
        modalContent.classList.add('scale-95', 'opacity-0');
        setTimeout(() => {
            uploadModal.classList.add('hidden');
            uploadModal.classList.remove('flex');
            // 重置表单
            uploadForm.reset();
            previewContainer.innerHTML = '';
            previewContainer.classList.add('hidden');
        }, 300);
    }

    closeModal.addEventListener('click', closeUploadModal);
    cancelUpload.addEventListener('click', closeUploadModal);

    // 点击模态框外部关闭
    uploadModal.addEventListener('click', (e) => {
        if (e.target === uploadModal) {
            closeUploadModal();
        }
    });

    // 拖放上传
    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
        dropArea.addEventListener(eventName, preventDefaults, false);
    });

    function preventDefaults(e) {
        e.preventDefault();
        e.stopPropagation();
    }

    ['dragenter', 'dragover'].forEach(eventName => {
        dropArea.addEventListener(eventName, highlight, false);
    });

    ['dragleave', 'drop'].forEach(eventName => {
        dropArea.addEventListener(eventName, unhighlight, false);
    });

    function highlight() {
        dropArea.classList.add('border-primary');
        dropArea.classList.add('bg-primary/5');
    }

    function unhighlight() {
        dropArea.classList.remove('border-primary');
        dropArea.classList.remove('bg-primary/5');
    }

    dropArea.addEventListener('drop', handleDrop, false);

    function handleDrop(e) {
        const dt = e.dataTransfer;
        const files = dt.files;
        handleFiles(files);
    }

    // 点击上传
    dropArea.addEventListener('click', () => {
        fileInput.click();
    });

    fileInput.addEventListener('change', () => {
        handleFiles(fileInput.files);
    });

    // 处理文件
    function handleFiles(files) {
        if (files.length > 0) {
            previewContainer.classList.remove('hidden');
            previewContainer.innerHTML = '';

            for (let i = 0; i < files.length; i++) {
                const file = files[i];
                const previewItem = document.createElement('div');
                previewItem.className = 'bg-neutral-50 rounded-lg p-3 flex items-center';

                let fileIcon = '<i class="fa fa-file-o text-neutral-400 text-2xl"></i>';
                if (file.type.startsWith('image/')) {
                    fileIcon = `<img src="${URL.createObjectURL(file)}" alt="${file.name}" class="w-16 h-16 object-cover rounded">`;
                } else if (file.type.startsWith('application/pdf')) {
                    fileIcon = '<i class="fa fa-file-pdf-o text-danger text-2xl"></i>';
                } else if (file.type.startsWith('application/msword') ||
                    file.type.startsWith('application/vnd.openxmlformats-officedocument.wordprocessingml.document')) {
                    fileIcon = '<i class="fa fa-file-word-o text-primary text-2xl"></i>';
                } else if (file.type.startsWith('application/vnd.ms-excel') ||
                    file.type.startsWith('application/vnd.openxmlformats-officedocument.spreadsheetml.sheet')) {
                    fileIcon = '<i class="fa fa-file-excel-o text-success text-2xl"></i>';
                }

                previewItem.innerHTML = `
                        <div class="w-16 h-16 flex items-center justify-center bg-neutral-100 rounded mr-3">
                            ${fileIcon}
                        </div>
                        <div class="flex-grow min-w-0">
                            <p class="font-medium text-neutral-700 truncate">${file.name}</p>
                            <p class="text-xs text-neutral-500">${formatFileSize(file.size)}</p>
                        </div>
                        <button class="text-neutral-400 hover:text-danger transition-colors duration-150 delete-file" data-index="${i}">
                            <i class="fa fa-times"></i>
                        </button>
                    `;

                previewContainer.appendChild(previewItem);
            }

            // 删除文件
            document.querySelectorAll('.delete-file').forEach(button => {
                button.addEventListener('click', function() {
                    const index = parseInt(this.getAttribute('data-index'));
                    const dt = new DataTransfer();

                    for (let i = 0; i < fileInput.files.length; i++) {
                        if (i !== index) {
                            dt.items.add(fileInput.files[i]);
                        }
                    }

                    fileInput.files = dt.files;

                    if (fileInput.files.length === 0) {
                        previewContainer.classList.add('hidden');
                    }

                    this.parentElement.remove();
                });
            });
        }
    }

    // 格式化文件大小
    function formatFileSize(bytes) {
        if (bytes === 0) return '0 Bytes';
        const k = 1024;
        const sizes = ['Bytes', 'KB', 'MB', 'GB'];
        const i = Math.floor(Math.log(bytes) / Math.log(k));
        return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
    }

    // 提交表单
    uploadForm.addEventListener('submit', (e) => {
        e.preventDefault();

        // 显示加载状态
        const submitButton = uploadForm.querySelector('button[type="submit"]');
        const originalText = submitButton.innerHTML;
        submitButton.disabled = true;
        submitButton.innerHTML = '<i class="fa fa-spinner fa-spin mr-2"></i> 上传中...';

        // 模拟上传过程
        setTimeout(() => {
            // 显示成功消息
            alert('文件上传成功！');
            closeUploadModal();

            // 恢复按钮状态
            submitButton.disabled = false;
            submitButton.innerHTML = originalText;
        }, 1500);
    });

    // 文件预览模态框
    const previewButtons = document.querySelectorAll('[title="预览"]');
    const previewModal = document.getElementById('preview-modal');
    const previewModalContent = document.getElementById('preview-modal-content');
    const closePreviewModal = document.getElementById('close-preview-modal');
    const closePreview = document.getElementById('close-preview');
    const previewImage = document.getElementById('preview-image');
    const pdfPlaceholder = document.getElementById('pdf-placeholder');
    const docPlaceholder = document.getElementById('doc-placeholder');
    const previewTitle = document.getElementById('preview-title');
    const previewFilename = document.getElementById('preview-filename');
    const previewFiletype = document.getElementById('preview-filetype');
    const previewUploadTime = document.getElementById('preview-upload-time');
    const previewFilesize = document.getElementById('preview-filesize');
    const previewDescription = document.getElementById('preview-description');

    // 打开预览模态框
    previewButtons.forEach(button => {
        button.addEventListener('click', () => {
            // 获取文件信息（实际应用中应该从服务器获取）
            const row = button.closest('tr');
            const filename = row.querySelector('td:first-child p:first-child').textContent;
            const filetype = row.querySelector('td:nth-child(2)').textContent;
            const uploadTime = row.querySelector('td:nth-child(3)').textContent;
            const filesize = row.querySelector('td:nth-child(4)').textContent;

            // 设置预览内容
            previewTitle.textContent = `预览：${filename}`;
            previewFilename.textContent = filename;
            previewFiletype.textContent = filetype;
            previewUploadTime.textContent = uploadTime;
            previewFilesize.textContent = filesize;

            // 设置描述（实际应用中应该从服务器获取）
            if (filename.includes('身份证')) {
                previewDescription.textContent = `${filename.split('-')[0]}的身份证${filename.includes('正面') ? '正面' : '反面'}照片，用于身份验证。`;
            } else if (filename.includes('产权证')) {
                previewDescription.textContent = '房产产权证明文件，包含房产详细信息。';
            } else {
                previewDescription.textContent = '其他重要文件。';
            }

            // 设置预览图片（实际应用中应该从服务器获取）
            if (filename.includes('.jpg') || filename.includes('.png')) {
                previewImage.src = `https://picsum.photos/id/${Math.floor(Math.random() * 100)}/800/600`;
                previewImage.classList.remove('hidden');
                pdfPlaceholder.classList.add('hidden');
                docPlaceholder.classList.add('hidden');
            } else if (filename.includes('.pdf')) {
                previewImage.classList.add('hidden');
                pdfPlaceholder.classList.remove('hidden');
                docPlaceholder.classList.add('hidden');
            } else {
                previewImage.classList.add('hidden');
                pdfPlaceholder.classList.add('hidden');
                docPlaceholder.classList.remove('hidden');
            }

            // 显示模态框
            previewModal.classList.remove('hidden');
            previewModal.classList.add('flex');
            setTimeout(() => {
                previewModalContent.classList.remove('scale-95', 'opacity-0');
                previewModalContent.classList.add('scale-100', 'opacity-100');
            }, 10);
        });
    });

    // 关闭预览模态框
    function closePreviewModalFunc() {
        previewModalContent.classList.remove('scale-100', 'opacity-100');
        previewModalContent.classList.add('scale-95', 'opacity-0');
        setTimeout(() => {
            previewModal.classList.add('hidden');
            previewModal.classList.remove('flex');
        }, 300);
    }

    closePreviewModal.addEventListener('click', closePreviewModalFunc);
    closePreview.addEventListener('click', closePreviewModalFunc);

    // 点击模态框外部关闭
    previewModal.addEventListener('click', (e) => {
        if (e.target === previewModal) {
            closePreviewModalFunc();
        }
    });

    // 为表格中的其他操作按钮添加交互效果
    document.querySelectorAll('table button').forEach(button => {
        button.addEventListener('click', function(e) {
            e.stopPropagation(); // 防止触发行的点击事件
        });
    });
</script>
</body>
</html>
    